<template>
	<view class="flex-col page">
		<view class="flex-col flex-1 group">
			<view class="flex-col">
				<image class="image-wrapper" src="../../static/top-logo.png" />
				<view class="flex-col group_2">
					
					<view class="">
						<text class="self-start font text_2">{{type == 1 ? '产品视频' : '安装视频'}}</text>
					</view>

					<view class="flex-row justify-between group_3">
						<view @click="tovideoDetail(item.video)" class="flex-col product-list" v-for="(item,index) in videoList">
							<view class="flex-col justify-start items-center">
								<!-- <image class="image_5" :src="item.img" /> -->
								<video :src="item.video" object-fit="cover" class="image_5"></video>
							</view>
							<view class="flex-col group_4 items-center">
								<text class="font_3 text_4">{{item.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>

		


	</view>
</template>

<script>
	import {
		getHome,
		getCate,
		getvideo
	} from '@/api/home.js'
	import {
		bindUser,
		userInfo
	} from '@/api/user.js'

	export default {
		data() {
			return {
				videoList: [],
				productList: [],
				config: {},
				mobile: '', //手机号
				show: false, //绑定手机号弹窗
				shenheStatus: 0, //审核状态 0未通过 未提交 1已通过
				adList: [],
				type: 1,//1产品视频 2安装视频
			}
		},
		onLoad(options) {
			console.log(options,'options')
			this.type = options.type;
			this.getData();
			this.getVideoInfo();
		},
		onShow() {
			
			
			// console.log(uni.getStorageSync("uid"), 'uid')
			// let uid = uni.getStorageSync("uid")
			// if(!uid) {
			// 	this.show = true
			// 	return
			// }
			// this.getUserInfo()
		},
		methods: {
			getVideoInfo(){
				getvideo({
					type: this.type
				}).then(res => {
					console.log(res.data,'llll')
					this.videoList = res.data
				})
			},
			tovideoDetail(url) {
				uni.navigateTo({
					url: '/pages/detail/index?type=3' + '&video=' + url
				})
			},
			previewImage(index) {

				uni.previewImage({
					urls: this.adList,
					current: index
				});
			},
			// 获取用户信息
			getUserInfo() {
				userInfo({
					uid: uni.getStorageSync("uid")
				}).then(res => {
					this.shenheStatus = res.data.status

				}).catch(err => {
					console.log(2222, err)
				})
			},
			// 跳转到视频列表
			toVideoList(type){
				uni.navigateTo({
					url: '/pages/videoList/index?type=' + type
				})
			},
			// 跳转到官网
			toGuanwang() {
				// window.location.href = this.config.store_guanwang
				window.open(this.config.store_guanwang, '_blank');
			},
			// 点击产品视频
			toVideo() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
			// 点击宣传片
			toXuanchuan() {
				uni.navigateTo({
					url: '/pages/detail/index?type=1' + '&video=' + this.config.store_xuanchuan_video
				})
			},
			getData() {
				getHome({}).then(res => {
					this.productList = res.data.cate;
					this.config = res.data.config;
					uni.setNavigationBarTitle({
						title: res.data.config.store_title
					})
				}).catch(err => {
					console.log(2222, err)
				})
			},
			bindSubmit() {
				console.log('bindSubmit')
				if (this.mobile == '') {
					console.log('lslsl')
					// this.show = false
					uni.showToast({
						title: '电话号不能为空',
						icon: 'none'
					})
					return
				}
				bindUser({
					mobile: this.mobile
				}).then(res => {
					this.show = false
					uni.showToast({
						title: '绑定成功'
					})
					uni.setStorageSync('uid', res.data.id)
					this.getUserInfo()

				}).catch(err => {
					console.log(2222, err)
				})


			},
			toCategory(index) {
				// let uid = uni.getStorageSync("uid")
				uni.navigateTo({
					url: '/pages/category/index?index=' + index
				})

			}
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');

	.mt-12-5 {
		margin-top: 0.78rem;
	}

	.ml-10-5 {
		margin-left: 0.66rem;
	}

	.ml-11 {
		margin-left: 0.69rem;
	}

	.ml-9-5 {
		margin-left: 0.59rem;
	}

	.mt-35 {
		margin-top: 2.19rem;
	}

	.mt-6-5 {
		margin-top: 0.41rem;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.font {
		font-size: 1.13rem;
		font-family: PingFang SC;
		line-height: 1.06rem;
	}

	.group {
		overflow-y: auto;
	}

	.image-wrapper {
		/* padding: 0.75rem 0; */
		/* background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=2c89247e752b7e6fd0c4ffa48d090f7e.png'); */
		width: 100%;
		height: 118rpx;
		/* background-color: #004d9d;
		background-size: 100% 100%;
		background-repeat: no-repeat; */
	}

	.image_2 {
		width: 6.59rem;
		height: 2.22rem;
	}

	.group_2 {
		padding: 0.94rem 0.88rem 0;
	}

	.equal-division {
		align-self: stretch;
		margin-right: 0.13rem;
	}

	.section {
		flex: 1 1 6.75rem;
	}

	.equal-division-item {
		padding: 1.5rem 0 1.25rem;
		/* background-color: #fbfbfb; */
		border-radius: 0.25rem;
		/* height: 6.75rem; */
	}

	.image_3 {
		/* width: 2.5rem;
		height: 2.5rem; */
		width: 78.5px;
		height: 78.5px;
	}

	.font_2 {
		font-size: 0.75rem;
		font-family: PingFang SC;
		line-height: 0.72rem;
		color: #151515;
	}

	.text_2 {
		margin-left: 0.13rem;
		margin-top: 1.28rem;
		color: #151515;
		position: relative;
		padding-left: 10px;
	}

	.text_2::before {
		position: absolute;
		content: "";
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 16px;
		border-radius: 0.5px 0.5px 0.5px 0.5px;
		background: linear-gradient(-151deg, #1c4efd, #1746fa);
	}

	.group_3 {
		flex-wrap: wrap;
		margin-top: 43rpx;
	}
	.product-list {
		background: #ffffff;
		border-radius: 16px 16px 16px 16px;
		box-shadow: 0 0 18px 3px #7676760f;
		margin-bottom: 20rpx;
		width: 335rpx;
	}

	.section_2 {
		padding: 1.63rem 0 2.13rem;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.41rem;
	}

	.image-wrapper_3 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #4b4b4b1a);
		/* background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=1ba84173e0b80229e0a8c80a3b3f78dc.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* width: 8.91rem; */
	}

	.image_5 {
		/* mix-blend-mode: screen; */
		/* width: 8.91rem;
		height: 4.66rem; */
		width: 335rpx;
		height: 189rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.section_3 {
		padding: 0.94rem 0;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.41rem;
	}

	.image-wrapper_2 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #b3b3b357);
		background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=73321b49c0cde6e4e6a18889be044b81.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 6.53rem;
	}

	.image_4 {
		mix-blend-mode: screen;
		width: 6.53rem;
		height: 6.53rem;
	}

	.group_4 {
		/* margin: 0 auto; */
		margin-top: 1rem;
		margin-bottom: 1rem;
		/* padding: 0 3.97rem; */
		text-align: center;
	}

	.font_3 {
		font-size: 0.88rem;
		font-family: PingFang SC;
		line-height: 0.78rem;
		font-weight: 500;
		color: #151515;
	}

	.text_4 {
		line-height: 0.81rem;
		width: 90%;
	}

	.text_3 {
		margin-right: 0.31rem;
		line-height: 0.81rem;
	}

	.group_5 {
		margin-top: 1rem;
	}

	.section_4 {
		padding: 1.66rem 0 1.5rem;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.41rem;
	}

	.image-wrapper_5 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #b3b3b357);
		background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=aa1a02a5233034617864ecc2d33ae35e.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 6.94rem;
	}

	.image_7 {
		mix-blend-mode: screen;
		width: 6.94rem;
		height: 5.25rem;
	}

	.image-wrapper_4 {
		margin-right: 0.094rem;
		padding: 0.91rem 0 1.5rem;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.38rem;
	}

	.image_6 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #b3b3b357);
		width: 6.22rem;
		height: 6rem;
	}

	.group_6 {
		margin-top: 1.06rem;
		padding: 0 4.03rem;
	}

	.text_5 {
		line-height: 0.81rem;
	}

	.text_6 {
		margin-right: 0.34rem;
		line-height: 0.84rem;
	}

	.section_5 {
		padding: 1.91rem 1rem 1.75rem;
		background-color: #212121f5;
	}

	.text-wrapper {
		padding: 0.88rem 0;
		background-color: #004d9d;
		border-radius: 1.28rem;
	}

	.text_7 {
		color: #ffffff;
		font-size: 1.19rem;
		font-family: YouSheBiaoTiHei;
		line-height: 0.88rem;
		letter-spacing: 0.24rem;
	}

	.text_77 {
		color: #ffffff;
		font-size: 1.19rem;
		font-family: YouSheBiaoTiHei;
		text-align: center;
		margin-top: 20rpx;
	}

	.equal-division_2 {
		margin: 0.81rem 0.66rem 0 0.53rem;
	}

	.group_7 {
		flex: 1 1 5.06rem;
	}

	.equal-division-item_2 {
		padding: 0.19rem 0 0.31rem;
	}

	.image_8 {
		width: 4.5rem;
		height: 4.5rem;
	}

	.font_4 {
		font-size: 0.81rem;
		font-family: PingFang SC;
		line-height: 0.78rem;
		color: #ffffff;
		text-align: center;
	}

	.divider {
		margin-right: 0.19rem;
		margin-top: 1.41rem;
		background-color: #ffffff2b;
		height: 0.031rem;
	}

	/* 绑定手机号弹窗 */
	.bind-title {
		height: 100rpx;
		line-height: 100rpx;
	}

	.bind-input {
		margin-bottom: 40rpx;
	}

	.bind-btn {
		width: 200rpx;
		height: 60rpx;
		border-radius: 16rpx;
		color: #fff;
		font-weight: 600;
		line-height: 60rpx;
		text-align: center;
		background-color: #004d9d;
	}

	.input-class {
		text-align: center;
	}
</style>